import React from 'react';
import './index.less';
import api from '../../../axios'
import { Row, Table, Modal, Tag, Button, Image } from 'antd';
import utils from '../../../utils/utils';

class index extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            data: [],
            data2: [],
            visible: false,
            subordinateVisible: false,
            pagination: {
              current: 1,
              size: 10,
            },
            loading: true,
        };
    }

    hideModal = () => {
        this.setState({
            visible: false,
        });
    };

    
    subordinateHideModal = () => {
        this.setState({
          subordinateVisible: false,
        });
    };

    onOk = async (data) => {
        let a = await utils.memberVerify(data[0])
        if(a == 'success') {
          this.setState({
            subordinateVisible: false
          })
          this.getData()
        }
    }

    getData = async () => {
        const { current, size } = this.state.pagination;
        this.setState({
          loading: true
        })

        let res = await api.get({
            method: 'get',
            url: '/members/lis',
            params: {
              page: current,
              size
            }
        });

        const pagination = { ...this.state.pagination };
        pagination.total = res.data.count;
        this.setState({
            data: res.data.list,
            loading: false,
            pagination
        })
        console.log(res.data);
    }

    async componentDidMount(){
      this.getData()
    }

    
    
    render() {
        const columns = [
            {
              title: '账号',
              dataIndex: 'username',
              key: 'username',
            },
            {
              title: '负责人姓名',
              dataIndex: 'name',
              key: 'name',
            },
            {
              title: '负责人手机号',
              dataIndex: 'phone',
              key: 'phone',
            },
            {
              title: '企业',
              dataIndex: 'company',
              key: 'company',
            },
            {
              title: '营业执照编码',
              dataIndex: 'company_code',
              key: 'company_code',
            },
            {
              title: '企业地址',
              dataIndex: 'company_address',
              key: 'company_address',
            },
            {
                title: '审核状态',
                dataIndex: 'is_pass',
                key: 'is_pass',
                render: (tags, record) => (
                  <span>
                       {
                          (
                            <>
                              <Tag color={ tags == 0 ? 'volcano' : 'green' } key={ tags }>
                               { tags == 0 ? '未审核' : '已审核' }
                              </Tag>
                              {
                                tags == 0 && 
                                <Button type="primary" value="small" onClick={() => verify(record)}>通过审核</Button>
                              }
                            </>
                          )
                      }
                  </span>
                ),
            },
            {
                title: '操作',
                key: 'action',
                fixed: 'right',
                render: (text, record) => (
                  <span onClick={() => showChild(record)}>
                    <a>查看从业人员</a>
                  </span>
                ),
            },
        ];    

        const columns2 = [
            {
              title: '姓名',
              dataIndex: 'name',
              key: 'name',
            },
            {
              title: '身份证号码',
              dataIndex: 'id_card',
              key: 'id_card',
            },
            {
              title: '手机号',
              dataIndex: 'phone',
              key: 'phone',
            },
            {
              title: '身份证正面',
              dataIndex: 'id_card_1',
              key: 'id_card_1',
              render: (text, record) => (
                <span>
                  <Image width={150} src={record.id_card_1}/>
                </span>
              ),
            },
            {
              title: '身份证背面',
              dataIndex: 'id_card_2',
              key: 'id_card_2',
              render: (text, record) => (
                <span>
                    <Image width={150} src={record.id_card_2}/>
                </span>
              ),
            },
        ];   

        const columns3 = [
          {
            title: '店铺照片',
            dataIndex: 'store_img',
            key: 'store_img',
            width: '200px',
            render: (text, record) => (
              <span>
                <Image width={150} src={record.store_img}/>
              </span>
            ),
          },
          {
            title: '营业执照',
            dataIndex: 'business_license',
            key: 'business_license',
            width: '200px',
            render: (text, record) => (
              <span>
                <Image width={150} src={record.business_license}/>
              </span>
            ),
          },
          {
            title: '成品油零售经营批准证书',
            dataIndex: 'license_1',
            key: 'license_1',
            width: '200px',
            render: (text, record) => (
              <span>
                <Image width={150} src={record.license_1}/>
              </span>
            ),
          },
          {
            title: '危险化学品经营许可证',
            dataIndex: 'license_2',
            key: 'license_2',
            width: '200px',
            render: (text, record) => (
              <span>
                <Image width={150} src={record.license_2}/>
              </span>
            ),
          },
          {
            title: '排污许可证',
            dataIndex: 'license_3',
            key: 'license_3',
            width: '200px',
            render: (text, record) => (
              <span>
                <Image width={150} src={record.license_3}/>
              </span>
            ),
          },
          {
            title: '销售预包装食品备案凭证',
            dataIndex: 'license_4',
            key: 'license_4',
            width: '200px',
            render: (text, record) => (
              <span>
                 <Image width={150} src={record.license_4}/>
              </span>
            ),
          },
      ];   

        const showChild = async (data) => {
            console.log(data);
            let res = await api.ajax({
                method: 'get',
                url: `/members/getworker?id=${data.id}`,
                // data: {
                //     page: 1
                // }
            });
            console.log(res);
    
            this.setState({
                data2: res.data,
                visible: true
            })
        }
    


        const onChange = (pagination, filters, sorter) => {
            console.log('params', pagination, filters, sorter);
            this.setState({
              pagination
            }, () => this.getData())
        }

        const verify = async (data) => {
          this.setState({
            subordinateVisible: true,
            data3: [{...data}]
          })
        }

        // rowSelection objects indicates the need for row selection
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
              console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            onSelect: (record, selected, selectedRows) => {
              console.log(record, selected, selectedRows);
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
              console.log(selected, selectedRows, changeRows);
            },
        };


        return (
           <>
             <Table
                columns={columns}
                dataSource={this.state.data}
                onChange={onChange}
                rowSelection={rowSelection}
                pagination={this.state.pagination}
                loading={this.state.loading}
                scroll={{ x: 1500, y: 1000 }}
            />

            <Modal
                title="查看从业人员"
                width={800}
                visible={this.state.visible}
                onCancel={this.hideModal}
                footer={false}
            >
                <Table
                    columns={columns2}
                    dataSource={this.state.data2}
                />
            </Modal>

            <Modal
                title="审核"
                width={1300}
                visible={this.state.subordinateVisible}
                onOk={() => this.onOk(this.state.data3)}
                onCancel={this.subordinateHideModal}
                okText="通过审核"
                cancelText="取消"
            >
                <Table
                    columns={columns3}
                    dataSource={this.state.data3}
                />
            </Modal>


           </>
        );
    }
}

export default index;